<template>
  <div style="padding-left: 10px;background: #BEC8D6;height: 100%;">
    <div class="top">
      <div class="common-tab" style="height: 100px;width: 20%;background: #F3C63D;" @click="getScheduleLock">
        <div class="tab-text" style="font-size: 30pt;color: #ffffff">{{name}}/{{scheduleInfo.matchCode}}</div>
      </div>
      <div class="common-tab" style="height: 100px;width: 20%;">
        <div style="height: 50px;background: #8497B0">
          <div class="tab-text" style="font-size: 20pt">{{scheduleInfo.matchStatus1}}</div>
        </div>
        <div style="height: 50px;background: #8497B0;border-top: 2px #ffffff solid">
          <div class="tab-text" style="font-size: 20pt;color: #ffffff">{{scheduleInfo.matchStatus2}}</div>
        </div>
      </div>
      <div class="common-tab" style="height: 100px;width: 20%;">
        <div style="height: 50px;background: #C9C9C9">
          <div class="tab-text" style="font-size: 20pt;color: #ffffff">{{ipad1.name}}</div>
        </div>
        <div style="height: 50px;background: #CB0101">
          <div class="tab-text" style="font-size: 20pt;color: #E98600">{{accuracy}}</div>
        </div>
      </div>
      <div class="common-tab" style="height: 100px;width: 20%;">
        <div style="height: 50px;background: #C9C9C9">
          <div class="tab-text" style="font-size: 20pt;color: #ffffff">{{ipad2.name}}</div>
        </div>
        <div style="height: 50px;background: #032C7E">
          <div class="tab-text" style="font-size: 20pt;color: #E98600">{{expressiveness}}</div>
        </div>
      </div>
      <div class="common-tab" style="height: 100px;width: 17%;background: #F3C63D;" @click="submitScore">
        <div class="tab-text" style="font-size: 30pt;color: #ffffff">提交</div>
      </div>
    </div>
    <div style="padding: 20px;">
      <div class="common-tab" style="width: 49%">
        <div v-for="(item,index) in ruleProjectList"v-if="item.belong === 1">
          <div class="common-tab" style="padding-bottom: 10px;">
            <el-button v-if="index === socreIndexA" style="border: 2px solid #00ff00; width: 100px;background: #AD3333;color: #FFFF00;border-radius: 10px;line-height: 20px;" @click="selectA(index)">{{item.childTop}}</el-button>
            <el-button v-else style=" width: 100px;background: #AD3333;color: #FFFF00;border-radius: 10px;line-height: 20px;" @click="selectA(index)">{{item.childTop}}</el-button>
          </div>
          <div class="common-tab" style="width: 200px">
            <div class="tab-text" style="font-size: 13pt;">{{item.childName}}</div>
          </div>
        </div>
      </div>
      <div class="common-tab" style="width: 45%;position: absolute;">
        <div v-for="(item,index) in ruleProjectList"v-if="item.belong === 2" >
          <div class="common-tab" style="width: 200px">
            <div class="tab-text" style="font-size: 13pt;">{{item.childName}}</div>
          </div>
          <div class="common-tab" style="padding-bottom: 10px;">
            <el-button v-if="index === socreIndexB" style="border: 2px solid #00ff00; width: 100px;background: #0167B0;color: #FFFF00;border-radius: 10px;line-height: 20px;" @click="selectB(index)">{{item.childTop}}</el-button>
            <el-button v-else style=" width: 100px;background: #0167B0;color: #FFFF00;border-radius: 10px;line-height: 20px;" @click="selectB(index)">{{item.childTop}}</el-button>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="common-tab" style="width: 55%">
        <div style="width: 80%" v-if="ipad1.selectRule == 1">
          <div class="score-box score-opt-box">
            <div class="score-opt1">
              <div class="tab-text-opt1">
                <div class="tab-text-opt-font" @click="prevScoreALeft1">
                  <div class="tab-text-opt-font">-{{ruleBaseRate1.baseScore}}</div>
                </div>
              </div>
            </div>
            <div class="score-opt3">
              <div class="tab-text-opt3" @click="prevScoreALeft2">
                <div class="tab-text-opt-font">-{{ruleBaseRate2.baseScore}}</div>
              </div>
            </div>
            <div class="score-opt2">
              <div class="tab-text-opt2" @click="prevScoreAAdd">
                <div class="tab-text-opt-font">+</div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 50%" v-else-if="ipad1.selectRule == 2">
          <select-column @select="getSelectValueA"></select-column>
        </div>
      </div>
      <div class="common-tab" style="width: 40%">
        <div style="width: 100%" v-if="ipad2.selectRule == 1">
          <div class="score-box score-opt-box">
            <div class="score-opt1">
              <div class="tab-text-opt1">
                <div class="tab-text-opt-font" @click="prevScoreALeft1B">
                  <div class="tab-text-opt-font">-{{ruleBaseRate1.baseScore}}</div>
                </div>
              </div>
            </div>
            <div class="score-opt3">
              <div class="tab-text-opt3" @click="prevScoreALeft2B">
                <div class="tab-text-opt-font">-{{ruleBaseRate2.baseScore}}</div>
              </div>
            </div>
            <div class="score-opt2">
              <div class="tab-text-opt2" @click="prevScoreAAddB">
                <div class="tab-text-opt-font">+</div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 65%" v-else-if="ipad2.selectRule == 2">
          <select-column  @select="getSelectValueB"></select-column>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getScheduleInfo } from '@/api/matchSchedule'
  import { querySchedleLock } from '@/api/matchScheduleLocked'
  import { saveSocre, matchRefereeScore } from '@/api/matchScore'
  import { getMatchScoreRuleProjectClientList, ruleScoreBaseRateList, selectIpadList } from '@/api/matchScoreRule'
  import { showMsg } from '@/utils'
  import SelectColumn from '@/components/SelectColumn'
  import { queryLoginStates, deleteLoginStates } from '@/api/user'
  export default {
    components: {
      SelectColumn
    },
    data() {
      return {
        scheduleId: '',
        scheduleInfo: {},
        ruleBaseRate1: {},
        ruleBaseRate2: {},
        expressiveness: 6.0,
        accuracy: 4.0,
        matchId: null,
        refereeId: null,
        matchAdminId: null,
        selected: '',
        selected1: '',
        referee: '',
        pk: 0,
        scoreType: 1,
        matchScore: null,
        ruleProjectList: [],
        selectIpadList: null,
        ipad1: {
          selectRule: 0
        },
        ipad2: {
          selectRule: 0
        },
        socreIndexA: 0,
        socreIndexB: 0,
        isRun: false,
        ruleScoreIntervalScore: null
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'name',
        'avatar'
      ])
    },
    created() {
      deleteLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {})
      this.referee = this.$store.state.user.name
      this.matchId = this.$store.state.user.matchReferee.matchId
      this.refereeId = this.$store.state.user.matchReferee.refereeId
      this.matchAdminId = this.$store.state.user.matchReferee.matchAdminId
      this.getScheduleLock()
      if (!this.isRun) {
        window.setInterval(() => {
          this.queryLoginStatesMe()
          this.matchRefereeScoreMe()
        }, 10000)
        this.isRun = true
      }
    },
    methods: {
      getSelectValueA(value) {
        this.selected = value
        this.ruleProjectList[this.socreIndexA].childTop = value
        this.ip1()
      },
      getSelectValueB(value) {
        this.selected = value
        this.ruleProjectList[this.socreIndexB].childTop = value
        this.ip2()
      },
      selectA(index) {
        this.socreIndexA = index
      },
      selectB(index) {
        this.socreIndexB = index
      },
      ip1() {
        var vv = 0
        var idx = 0
        for (var k in this.ruleProjectList) {
          if (this.ruleProjectList[k].belong === 1) {
            vv += parseFloat(this.ruleProjectList[k].childTop)
            idx++
          }
        }
        if (this.ipad1.arithmeticRule === 2) {
          this.accuracy = parseFloat(vv / idx).toFixed(2)
        } else {
          this.accuracy = vv.toFixed(2)
        }
      },
      ip2() {
        var vv = 0
        var idx = 0
        for (var k in this.ruleProjectList) {
          if (this.ruleProjectList[k].belong === 2) {
            vv += parseFloat(this.ruleProjectList[k].childTop)
            idx++
          }
        }
        if (this.ipad1.arithmeticRule === 2) {
          this.expressiveness = parseFloat(vv / idx).toFixed(2)
        } else {
          this.expressiveness = parseFloat(vv).toFixed(2)
        }
      },
      queryLoginStatesMe() {
        queryLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {
          if (res.data.data != null) {
            deleteLoginStates({ refereeId: this.$store.state.user.matchReferee.id }).then(res => {
              this.$store.dispatch('LogOut').then(() => {
                location.reload()
              })
            })
          }
        })
      },
      getScheduleLock() {
        var obj = {
          matchId: this.matchId,
          matchAdminId: this.matchAdminId
        }
        querySchedleLock(obj).then(res => {
          if (res.data.data != null) {
            if (res.data.data.status === 0) {
              this.$router.push({ path: '/coachScore' })
            } else {
              this.scheduleId = res.data.data.matchScheduleId
              this.getScheduleInfoData()
              showMsg('获取场次成功', 1)
            }
          } else {
            showMsg('未开始新比赛，请等待获取。', 1)
          }
        })
      },
      getScheduleInfoData() {
        getScheduleInfo({ matchScheduleId: this.scheduleId }).then(res => {
          this.scheduleInfo = res.data.data
          this.getRuleProjectList(this.scheduleInfo.refereeType)
          this.matchScoreSelectIpadList(this.scheduleInfo.refereeType)
          this.getRuleScoreBaseRateList()
          this.matchRefereeScoreMe()
        })
      },
      getRuleProjectList(id) {
        var obj = {
          ruleId: id
        }
        getMatchScoreRuleProjectClientList(obj).then(response => {
          this.ruleProjectList = response.data.data
        })
      },
      getRuleScoreBaseRateList() {
        var obj = {
          ruleId: this.scheduleInfo.refereeType
        }
        ruleScoreBaseRateList(obj).then(response => {
          this.ruleBaseRate1 = response.data.data[0]
          this.ruleBaseRate2 = response.data.data[1]
        })
      },
      prevScoreALeft1() {
        var val = this.ruleProjectList[this.socreIndexA].childTop - (this.ruleBaseRate1.baseScore * this.ruleBaseRate1.baseRate * 100) / 100
        val = parseFloat(val).toFixed(1)
        if (val < 0) {
          this.ruleProjectList[this.socreIndexA].childTop = 0
        } else {
          this.ruleProjectList[this.socreIndexA].childTop = val
        }
        this.ip1()
      },
      prevScoreALeft2() {
        var val = this.ruleProjectList[this.socreIndexA].childTop - (this.ruleBaseRate2.baseScore * this.ruleBaseRate2.baseRate * 100) / 100
        val = parseFloat(val).toFixed(1)
        if (val < 0) {
          this.ruleProjectList[this.socreIndexA].childTop = 0
        } else {
          this.ruleProjectList[this.socreIndexA].childTop = val
        }
        this.ip1()
      },
      prevScoreAAdd() {
        var val = parseFloat(this.ruleProjectList[this.socreIndexA].childTop) + 0.1
        val = parseFloat(val).toFixed(1)
        if (val > 1) {
          this.ruleProjectList[this.socreIndexA].childTop = 1
        } else {
          this.ruleProjectList[this.socreIndexA].childTop = val
        }
        this.ip1()
      },
      prevScoreALeft1B() {
        var val = this.ruleProjectList[this.socreIndexB].childTop - (this.ruleBaseRate1.baseScore * this.ruleBaseRate1.baseRate * 100) / 100
        val = parseFloat(val).toFixed(1)
        if (val < 0) {
          this.ruleProjectList[this.socreIndexB].childTop = 0
        } else {
          this.ruleProjectList[this.socreIndexB].childTop = val
        }
        this.ip2()
      },
      prevScoreALeft2B() {
        var val = this.ruleProjectList[this.socreIndexB].childTop - (this.ruleBaseRate2.baseScore * this.ruleBaseRate2.baseRate * 100) / 100
        val = parseFloat(val).toFixed(1)
        if (val < 0) {
          this.ruleProjectList[this.socreIndexB].childTop = 0
        } else {
          this.ruleProjectList[this.socreIndexB].childTop = val
        }
        this.ip2()
      },
      prevScoreAAddB() {
        var val = parseFloat(this.ruleProjectList[this.socreIndexB].childTop) + 0.1
        val = parseFloat(val).toFixed(1)
        if (val > 1) {
          this.ruleProjectList[this.socreIndexB].childTop = 1
        } else {
          this.ruleProjectList[this.socreIndexB].childTop = val
        }
        this.ip2()
      },
      matchScoreSelectIpadList(id) {
        var obj = {
          ruleId: id
        }
        selectIpadList(obj).then(response => {
          this.selectIpadList = response.data.data
          this.ipad1 = this.selectIpadList[0]
          this.ipad2 = this.selectIpadList[1]
          this.ip1()
          this.ip2()
        })
      },
      matchRefereeScoreMe() {
        if (this.scheduleId !== '' && this.scheduleId !== null) {
          var obj = {
            matchScheduleId: this.scheduleId,
            refereeId: this.refereeId,
            scoreType: this.scoreType
          }
          matchRefereeScore(obj).then(res => {
            this.matchScore = res.data.data
          })
        }
      },
      submitScore() {
        var obj = {
          expressiveness: this.expressiveness,
          accuracy: this.accuracy,
          matchScheduleId: this.scheduleId,
          refereeId: this.refereeId,
          referee: this.referee,
          scoreType: this.scoreType,
          winner: this.pk
        }
        if (this.matchScore != null) {
          obj.id = this.matchScore.id
          showMsg('已提交，如需重复提交请联系记录台。', 2)
          return
        } else {
          obj.id = 0
        }
        saveSocre(obj).then(res => {
          if (res.data.code === 0) {
            this.matchRefereeScoreMe()
            showMsg(res.data.message, 1)
          } else {
            showMsg(res.data.message, 2)
          }
        })
      }
    }
  }
</script>

<style scoped>
  .top{
    height: 110px;

  }
  .tab-text{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    font-size: 12pt;
  }
  .tab-text-opt-font{
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
    color: #FFFF00;
    font-size: 26pt;
  }
  .score-box{
    margin-top: 30px;
    height: 100%;
    display: -webkit-box;             /*flex弹性布局*/
    -webkit-box-align: center;
    -webkit-box-pack: center;
  }
  .left-score{
    background: #E32F2F;
    height: 120px;
    width: 120px;
    border-radius: 1rem;
  }

  .score-opt-box{
    height: 80px;
    width: 100%;
  }
  .score-opt1{
    width: 35%;
    height: 100%;
  }
  .score-opt2{
    width: 28%;
    height: 100%;
  }
  .score-opt3{
    width: 35%;
    height: 100%;
  }
  .tab-text-opt1{
    height: 100%;
    background: #FF1919;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
  .tab-text-opt2{
    height: 100%;
    background: #F04141;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
  .tab-text-opt3{
    height: 100%;
    background: #156AB8;
    margin: 0 10px 0 10px;
    border-radius: 1rem;
  }
</style>
